<template>
	<div class="view">
		<Table
		 	border
			:loading="data.isLoading" 
		 	:columns="columns" 
		 	:data="data.data">
		 </Table>
		 <div class="pagePanel" v-show="data.data.length != 0">
			<Page
			show-sizer 
			show-total
			show-elevator
			placement="top"
			:total="data.page.totalSize" 
			:page-size="data.page.pagesize" 
			:current="data.page.currentPage + 1" 
			:page-size-opts="[20, 40, 60, 80, 100]"
			@on-change="changePage"
			@on-page-size-change="changePageSize"></Page>
		</div>
	</div>
</template>

<script>
import {formatTimestamp} from '@/common/js/date_util.js'
export default {
	props: ['data'],
	data() {
		return {
			consumeColumns: [
				{
					title: '序号',
					type: 'index',
				},
				{
					title: '日期',
					key: 'submittime',
					render: (h, params) => {
						return params.row.submittime == null? '-/-' : formatTimestamp(params.row.submittime / 1000);
					}
				},
				{
					title: '消费金额',
					key: 'money',
					align: 'right',
					render: (h, params) => {
						return params.row.money.toFixed(1);
					}
				},
				{
					title: '赠送积分',
					key: 'integral',
					render: (h, params) => {
						return params.row.integral == null? '-/-' : params.row.submittime;
					}
				},
				{
					title: '消费前余额',
					key: 'balance',
					align: 'right',
					render: (h, params) => {
						return params.row.balance.toFixed(1);
					}
				}
			],
			payColumns: [
				{
					title: '序号',
					type: 'index',
				},
				{
					title: '日期',
					key: 'submittime',
					render: (h, params) => {
						return params.row.submittime == null? '-/-' : formatTimestamp(params.row.submittime / 1000);
					}
				},
				{
					title: '充值金额',
					key: 'money',
					align: 'right',
					render: (h, params) => {
						return params.row.money.toFixed(1);
					}
				},
				{
					title: '赠送积分',
					key: 'integral',
					render: (h, params) => {
						return params.row.integral == null? '-/-' : params.row.submittime;
					}
				},
				{
					title: '余额',
					key: 'balance',
					align: 'right',
					render: (h, params) => {
						return params.row.balance.toFixed(1);
					}
				}
			],
			pointColumns: [
				{
					title: '序号',
					type: 'index',
				},
				{
					title: '卡号',
					key: 'cardNo'
				},
				{
					title: '获取积分',
					key: 'point'
				},
				{
					title: '消费金额',
					key: 'money'
				}
			],
		}
	},
	computed: {
		columns() {
			let data = this.data;
			let columns;
			if (data.listType == 'consume') {
				columns = this.consumeColumns;
			} else if (data.listType == 'pay') {
				columns = this.payColumns;
			} else if (data.listType == 'point') {
				columns = this.pointColumns;
			}
			return columns;
		}
	},
	methods: {
		changePage(page) {
			this.$emit('on-change-page', this.data.listType, page);
		},
		changePageSize(pageSize) {
			this.$emit('on-change-pageSize', this.data.listType, pageSize);
		}
	}
}
</script>

<style scoped lang="less">
.view {
	.pagePanel {
		margin-top: 20px;
		text-align: center;
	}
}
</style>